<template>  
<div class="accordion" id="custom-accordion-one">
  <div class="accordion-item" v-for="(info, index) in dataList" :key="index">
    <h2 class="accordion-header" :id="`heading_` + info.id">
      <button class="accordion-button collapsed py-0" type="button" data-bs-toggle="collapse" :data-bs-target="`#collapse` + info.id" aria-expanded="true" :aria-controls="`collapse` + info.id">
            {{info.id}}
            <span class="text-danger ms-auto" v-if="info.intlTicket === 1">国际{{getMonitorType(info.monitoring)}}</span>
            <span class="text-danger ms-auto" v-else>国内{{getMonitorType(info.monitoring)}}</span>
            <span class="ms-2">{{getStatusDesc(info.status)}}</span>

            <span class="text-danger small" v-if="info.dayAndNight === 1">日夜</span>

            <span class="text-success ms-autl"><strong>{{info.newPnrNo}}</strong></span>
            <!-- <i class="mdi mdi-chevron-down accordion-arrow"></i> -->
      </button>
    </h2>
     <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
      <div :id="`collapse` + info.id" class="collapse" data-parent="#custom-accordion-one">
        <table class="table table-sm">
          <thead>
            <tr class="">
              <th>出发</th>
              <th>到达</th>
              <th>日期</th>
              <th>航班号</th>
              <th>舱位</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(flt, index) in info.flights" :key="index">
              <td>{{flt.flight.departureAirport}}
                {{flt.flight.departureAirportName}}
                {{flt.flight.departureTerminal}}
              </td>
              <td>{{flt.flight.arrivalAirport}}</small>
                {{flt.flight.arrivalAirportName}}
                {{flt.flight.arrivalTerminal}}
              </td>
              <td>{{flt.flight.departureDate}}</td>
              <td>{{flt.flight.flightNo}}</td>
              <td>{{flt.flight.subclass}}</td>
            </tr>
          </tbody>
        </table>

        <table class="table table-sm">
          <thead>
            <tr class="">
              <th>姓名</th>
              <th class="d-none d-md-table-cell">证件类型</th>
              <th class="d-none d-sm-table-cell">证件号</th>
              <th>手机</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(psg, index) in info.passengers" :key="index">
              <td>{{psg.name}}</td>
              <td class="d-none d-md-table-cell">{{psg.idType}}</td>
              <td class="d-none d-sm-table-cell">{{psg.idNo}}</td>
              <td>{{psg.mobile}}</td>
            </tr>
          </tbody>
        </table>

        <table class="table table-sm">
          <thead>
            <tr class="">
              <th class="d-none d-md-table-cell">原编码</th>
              <th>授权Office</th>
              <th>备注</th>
              <th>订单日期</th>
              <th>次数</th>
              <th>更新时间</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="d-none d-md-table-cell">
                {{info.oldPnrNo}}
              </td>
              <td>
                {{info.authOfficeNo}}
              </td>
              <td>
                {{info.remark}}
              </td>
              <td>
                {{info.createTime.substring(5, 5)}}
              </td>
              <td>
                {{info.tryCount}}
              </td>
              <td>
                <template v-if="info.lastUpdate !== null">
                  {{info.lastUpdate.substring(5, 5)}}
                </template>
              </td>
            </tr>
          </tbody>
        </table>

        <div class="card-body row">
          <button class="btn btn-info mb-2" @click.stop="copyOrder(info.id)">复制</button>
          <template v-if="info.status === 0 || info.status === 1">
            <button class="btn btn-danger mb-2" @click.stop="cancelOrder(info.id)">取消</button>
          </template>
          <template v-if="info.status === 4 || info.status === 2">
            <button class="btn btn-info mb-2" @click.stop="monitorOrder(info.id)">重新监控</button>

            <button class="btn btn-danger mb-2" @click.stop="deleteOrder(info.id)">删除</button>
          </template>
        </div>
      </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {
  cancelCatchOrder,
  monitorCatchOrder,
  showMonitorTypeDesc,
  showOrderStatus,
} from "@/api/catch-order.js";

export default {
  props: {
    dataList: {
      type: Array,
    },
  },
  methods: {
    getStatusDesc: function (status) {
      return showOrderStatus(status);
    },
    getMonitorType: function (monitoring) {
      return showMonitorTypeDesc(monitoring);
    },
    cancelOrder: function (id) {
      cancelCatchOrder(
        id,
        {
          reasonDesc: "test",
        },
        (v) => {
          this.$emit("refresh");
        }
      );
    },
    monitorOrder: function (id) {
      monitorCatchOrder(id, (v) => {
        this.$emit("refresh");
      });
    },
    copyOrder: function (id) {
      this.$emit("copyOrder", id);
    },
    deleteOrder: function (id) {
      this.$emit("deleteOrder", id);
    },
  },
};
</script>
